<script setup>
import {ref, reactive, onMounted, onBeforeMount} from "vue";
import {getMaterialId, addMaterial} from "@/apis/material";
import {getCategoryList} from "@/apis/category";
import {Message} from "tdesign-mobile-vue";
import {useRouter} from "vue-router";
import {useUserStore} from "@/stores/user"
import SelectWarehouseComponent from "@/components/Warehouse/SelectComponent.vue";

const store = useUserStore();
const token = store.token;
const router = useRouter();
const files = ref([]);
const formData = ref({
  id: "",
  cate_id: 0,
  cover: "",
  name: "",
  unit: "",
  specs: "",
  bar_code: "",
  material_id: "",
  notes: "",
  warehouse: "",
  warehouse_id: 0
})
let cateList = [[]];
const typeValue = reactive([1]);
const typeText = ref('');
const typeShow = ref(false);
const visible = ref(false)
const ATTACH_URL = import.meta.env.VITE_ATTACH_URL;
onBeforeMount(() => {
  getCategoryList()
      .then(res => {
        const {code, data} = res.data;
        if (code === 1) {
          const option = [];
          data.forEach(element => {
            option.push({
              label: element.name,
              value: element.id
            })
          });
          cateList = [option];
        }
      })
})

onMounted(() => {
  getMaterialId()
      .then(res => {
        const {code, msg, data} = res.data;
        if (code === 1) {
          formData.value.material_id = data
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          })
        }
      })
})

function onPicker(value, context) {
  const label = context.label[0];
  formData.value.cate_id = value[0];
  typeText.value = label;
  typeShow.value = false
}

function scanCode() {

}

function selectWarehouseConfirm(item) {
  formData.value.warehouse = item.name;
  formData.value.warehouse_id = item.id;
  visible.value = false;
}

function formatRes(e) {
  if (e.code === 1) {
    formData.value.cover = e.data.key
    return {
      url: ATTACH_URL + "/" + e.data.key,
      key: e.data.key
    }
  } else {
    return {
      error: e.msg,
    }
  }
}

function submitFunc() {
  addMaterial(formData.value)
      .then(res => {
        const {code, msg} = res.data;
        if (code === 1) {
          Message.success({
            content: "添加完成",
            context: document.querySelector('main'),
            offset: [8, 8],
          });
          setTimeout(() => {
            router.back();
          }, 2000);
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8],
          })
        }
      })
}
</script>
<template>
  <main>
    <t-form label-width="150" @submit="submitFunc">
      <t-cell-group title="物品信息">
        <t-form-item label="物品图片">
          <t-upload v-model="files"
                    :multiple="false"
                    :max="1"
                    :size-limit="{ size: 20, unit: 'MB' }"
                    accept="image/*"
                    capture
                    :action="ATTACH_URL"
                    :headers="{ Authorization: token }"
                    :formatResponse="formatRes">
          </t-upload>
        </t-form-item>
        <t-form-item requiredMark label="物品名称">
          <t-input v-model="formData.name" borderless placeholder="物品名称"></t-input>
        </t-form-item>
        <t-form-item label="计量单位">
          <t-input v-model="formData.unit" borderless placeholder="个/件/箱/斤/吨"></t-input>
        </t-form-item>
        <t-form-item label="物品规格">
          <t-input v-model="formData.specs" borderless placeholder="20*20*20(选填)"></t-input>
        </t-form-item>
        <t-form-item label="物品类型">
          <t-input @click="typeShow = true" readonly borderless v-model="typeText" placeholder="请选择类型"></t-input>
          <t-popup v-model="typeShow" placement="bottom">
            <t-picker v-model="typeValue" :columns="cateList" @cancel="typeShow = false" @confirm="onPicker"/>
          </t-popup>
        </t-form-item>
        <t-form-item label="所在仓库">
          <t-input v-model="formData.warehouse" @click="visible=true" readonly borderless
                   placeholder="请选择仓库"></t-input>
        </t-form-item>
        <t-form-item label="物品编码">
          <t-input v-model="formData.material_id" borderless>
            <template #suffixIcon>
              <t-icon @click="scanCode" name="scan"/>
            </template>
          </t-input>
        </t-form-item>
        <t-form-item label="物品条码">
          <t-input v-model="formData.bar_code" borderless placeholder="选填">
            <template #suffixIcon>
              <t-icon @click="scanCode" name="scan"/>
            </template>
          </t-input>
        </t-form-item>
        <t-form-item v-model="formData.notes" label="备注信息">
          <t-input borderless placeholder="选填"></t-input>
        </t-form-item>
      </t-cell-group>
      <div class="divider-block"></div>
      <div style="margin: 8px;">
        <t-button block theme="primary" type="submit">保存</t-button>
      </div>
    </t-form>

    <t-popup v-model="visible" placement="bottom">
      <div class="header">
        <div class="btn btn--cancel" @click="visible=false">
          <t-icon name="chevron-down"></t-icon>
        </div>
        <div class="title">请选择仓库</div>
        <div class="btn btn--confirm" @click="visible=false"></div>
      </div>
      <SelectWarehouseComponent @confirm="selectWarehouseConfirm"/>
    </t-popup>
  </main>
</template>
<style scoped lang="less">
.t-cell {
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  height: 116rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
}

.btn {
  font-size: 16px;
  padding: 16px;
}

.btn--cancel {
  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
}

.btn--confirm {
  color: #0052d9;
  width: 20px;
  height: 20px;
}
</style>